<template>
  <div class="main">
    <ElConfigProvider :locale="config.locale">
      <ElRadioGroup v-model="model" @change="handleCheckedChange">
        <template v-if="props.buttonful">
          <ElRadioButton v-for="item of data" :key="data" :label="item[prop.label]" :value="item[prop.value]"
            :disabled="item[prop.disabled]" :props="prop">
            <slot :data="item"></slot>
          </ElRadioButton>
        </template>
        <div v-else :class="{ 'vertical': props.vertical }">
          <ElRadio v-for="item of data" :key="data" :label="item[prop.label]" :value="item[prop.value]"
            :disabled="item[prop.disabled]" :props="prop">
            <slot :data="item"></slot>
          </ElRadio>
        </div>
      </ElRadioGroup>
    </ElConfigProvider>
    <Http v-model="data" v-model:loading="loading" ref="httpRef" :url="url" :method="method" :params="finalParams"
      :auto="auto" :concurrent="concurrent">
    </Http>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { ElConfigProvider, ElRadioGroup, ElRadioButton, ElRadio } from 'element-plus';
import config from '../../config';
import Http from '@/components/Http';
import 'element-plus/dist/index.css'

const props = defineProps({
  url: {
    type: String,
    default: ''
  },
  method: {
    type: String,
    default: 'get'
  },
  params: {
    type: Object,
    default: () => { return {} }
  },
  //是否当参数变化时自动发送请求
  auto: {
    type: Boolean,
    default: false
  },
  //为true时允许出现并发请求
  concurrent: {
    type: Boolean,
    default: true
  },
  vertical: {
    type: Boolean,
    default: false
  },
  buttonful: {
    type: Boolean,
    default: false
  },
  prop: {
    type: Object,
    default: () => { return { label: 'name', value: 'id', disabled: 'disabled' } }
  },
});
const emit = defineEmits(["onChange"]);
const model = defineModel()
const data = defineModel('data', {
  type: Array,
  default: () => []
});
const loading = ref(false);
const httpRef = ref();


const finalParams = computed(() => {
  return {
    ...props.params,
  }
})

function send() {
  httpRef.value.send();
}

function handleCheckedChange(values) {
  emit('onChange', values);
}

defineExpose({
  send
})

</script>
<style scoped>
.main {
  display: flex;
  flex-direction: column;
}

.vertical {
  display: flex;
  flex-direction: column;
}
</style>